<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>个人中心</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
    <style>
        html,
        body {
            width: 100%;
            min-height: 100%;
            background: #eee;
        }

        #app {
            padding-top: 0.5rem;
        }

        .input_box {
            height: 45px;
            background: #fff;
            padding: 0 0.75rem;
            display: flex;
            align-items: center;
        }
    </style>
</head>

<body>
    <div class="input_box">
        <div style="margin-right: 0.5rem;">
            <i class="aui-iconfont aui-icon-search"></i>
        </div>
        <input type="text" name="" value="" v-model="keywords" placeholder="您还可以手动输入地址">
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/zepto.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/utils.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/aui-pull-refresh.js"></script>
<script type="text/javascript">

    apiready = function() {


        var map = api.require('bMap');


        var search_vue = new Vue({
            el: '.input_box',
            data: {
                keywords: '',
                city: ''
            },
            created: function() {

            },
            mounted: function() {

                var $_this = this;
                $_this.set_chose_address();

            },
            watch: {
                keywords: function() {
                    var $_this = this;
                    map.getCoordsFromName({
                        city: $_this.city,
                        address: $_this.keywords
                    }, function(ret, err) {
                        if (ret.status) {
                            // alert(JSON.stringify(ret));

                            var search_lon = ret.lon;
                            var search_lat = ret.lat;

                            map.setCenter({
                                coords: {
                                    lon: ret.lon,
                                    lat: ret.lat
                                },
                                animation: true
                            });

                            map.addAnnotations({
                                annotations: [{
                                    id: 1,
                                    lon: ret.lon,
                                    lat: ret.lat
                                }],
                                icon: 'widget://',
                                draggable: true
                            }, function(ret) {
                                // console.log(JSON.stringify(ret));
                                if (ret.eventType=="click") {
                                  map.getNameFromCoords({
                                    lon: search_lon,
                                    lat: search_lat
                                  }, function(ret, err) {
                                      if (ret.status) {
                                          console.log(JSON.stringify(ret));
                                          var search_province = ret.province;
                                          var search_ctiy = ret.city;
                                          var search_district = ret.district;
                                          api.confirm({
                                              title: '确定地址',
                                              msg: '是否选择该点作为地址？',
                                              buttons: ['取消', '确定']
                                          }, function(ret, err) {
                                              if (ret) {
                                                  var index = ret.buttonIndex;
                                                  if (index == 2) {
                                                      api.sendEvent({
                                                          name: 'chose_map',
                                                          extra: {
                                                              province: search_province,
                                                              city: search_ctiy,
                                                              district: search_district,
                                                              address:$_this.keywords
                                                          }
                                                      });
                                                      api.closeWin({});
                                                  }
                                              } else {
                                                  alert(JSON.stringify(err));
                                              }
                                          });
                                      }
                                  });
                                }
                            });



                        }
                    });
                }
            },
            methods: {
                // 点击获取当前的位置设为地址
                set_chose_address: function() {
                    var $_this = this;
                    // 获取当前定位
                    map.getLocation({
                        accuracy: '100m',
                        autoStop: true,
                        filter: 1
                    }, function(ret, err) {
                        if (ret.status) {
                            // console.log(JSON.stringify(ret));

                            map.getNameFromCoords({
                                lon: ret.lon,
                                lat: ret.lat
                            }, function(ret, err) {
                                if (ret.status) {
                                    // console.log(JSON.stringify(ret));

                                    $_this.city = ret.city;
                                }
                            });

                            map.open({
                                rect: {
                                    x: 0,
                                    y: 120,
                                    w: 'auto',
                                    h: 'auto'
                                },
                                center: {
                                    lon: ret.lon,
                                    lat: ret.lat
                                },
                                zoomLevel: 18,
                                showUserLocation: true,
                                fixedOn: api.frameName,
                                fixed: true
                            }, function(ret) {
                                if (ret.status) {
                                    // alert('地图打开成功');
                                    // 地图点击事件  设置红点以及获取经纬度
                                    map.addEventListener({
                                        name: 'click'
                                    }, function(ret) {
                                        if (ret.status) {
                                            console.log(JSON.stringify(ret));
                                            map.setCenter({
                                                coords: {
                                                    lon: ret.lon,
                                                    lat: ret.lat
                                                },
                                                animation: true
                                            });

                                            var chose_lon = ret.lon,
                                                chose_lat = ret.lat;

                                            if (api.pageParam.bj_type == "点") {
                                                map.addAnnotations({
                                                    annotations: [{
                                                        id: 1,
                                                        lon: ret.lon,
                                                        lat: ret.lat
                                                    }],
                                                    icon: 'widget://',
                                                    draggable: true
                                                }, function(ret) {
                                                    // alert(JSON.stringify(ret));
                                                    if (ret) {}
                                                });


                                                map.getNameFromCoords({
                                                    lon: chose_lon,
                                                    lat: chose_lat
                                                }, function(ret, err) {
                                                    if (ret.status) {

                                                        var province = ret.province;
                                                        var city = ret.city;
                                                        var district = ret.district;
                                                        var address = ret.address;

                                                        api.confirm({
                                                            title: '确定地址',
                                                            msg: '是否选择该点作为地址？',
                                                            buttons: ['取消', '确定']
                                                        }, function(ret, err) {
                                                            if (ret) {
                                                                var index = ret.buttonIndex;
                                                                if (index == 2) {

                                                                    api.sendEvent({
                                                                        name: 'chose_map',
                                                                        extra: {
                                                                            province: province,
                                                                            city: city,
                                                                            district: district,
                                                                            address:address
                                                                        }
                                                                    });
                                                                    api.closeWin({});
                                                                }
                                                            } else {
                                                                alert(JSON.stringify(err));
                                                            }
                                                        });
                                                    }
                                                });


                                            } else {
                                                map.addAnnotations({
                                                    annotations: [{
                                                        id: 1,
                                                        lon: ret.lon,
                                                        lat: ret.lat
                                                    }],
                                                    icon: 'widget://',
                                                    draggable: true
                                                }, function(ret) {
                                                    if (ret) {
                                                        // alert(JSON.stringify(ret));
                                                        map.getNameFromCoords({
                                                            lon: chose_lon,
                                                            lat: chose_lat
                                                        }, function(ret, err) {
                                                            if (ret.status) {
                                                                console.log(JSON.stringify(ret));

                                                                api.sendEvent({
                                                                    name: 'chose_map',
                                                                    extra: {
                                                                        province: ret.province,
                                                                        city: ret.city,
                                                                        district: ret.district
                                                                    }
                                                                });


                                                                api.closeWin({});

                                                            }
                                                        });
                                                    }
                                                });
                                                map.addPolygon({
                                                    id: 2,
                                                    styles: {
                                                        borderColor: 'rgba(0,0,0,.3)',
                                                        borderWidth: 1,
                                                        fillColor: 'rgba(0,0,0,.3)'
                                                    },
                                                    points: [{
                                                        lon: ret.lon - 0.0002,
                                                        lat: ret.lat + 0.0002
                                                    }, {
                                                        lon: ret.lon + 0.0002,
                                                        lat: ret.lat + 0.0002
                                                    }, {
                                                        lon: ret.lon + 0.0002,
                                                        lat: ret.lat - 0.0002
                                                    }, {
                                                        lon: ret.lon - 0.0002,
                                                        lat: ret.lat - 0.0002
                                                    }]
                                                });
                                            }
                                        }
                                    });
                                }
                            });
                        } else {
                            alert(err.code);
                        }
                    });
                }
            }
        })





    };
</script>

</html>
